<template>
  <div class="left">
    <el-menu :default-active="indexs" class="el-menu-vertical-demo" active-text-color="#409FEE " router>
      <el-menu-item :index='m.path' v-for="(m,index) in menuList" :key="index" style="height:60px" @click="changbei(m.path)">
         <div class="shugang" :class="{active:m.path==gop}"></div>
        <i :class="m.icon"></i>
        <span slot="title" style="margin-left:15px">{{ m.content }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {   id: '1',
          icon: "iconfont icon-yinle",
          content: "个性推荐",
          path:'/recommed'
        },
        {  id: '2',icon: "iconfont icon-gedan", content: "歌单" , path:'/gedan'},
        { id: '3',
          icon: "iconfont icon-paihangbang",
          content: "排行榜",
           path:'/rank'
        },
        { id: '4',
          icon: "iconfont icon-geshou",
          content: "歌手",
           path:'/songs'
        },
        {  id: '5',icon: "iconfont icon-MV", content: "MV" , path:'/newmv'},

        { id: '6',
          icon: "iconfont icon-yinle101",
          content: "最新音乐",
           path:'/newmusic'
        },
      ],
      gop:'',
      indexs:''
    };
  },
  methods:{
      changbei(m){
          this.gop=m
          
      }
  },
  mounted(){
      this.indexs=this.$route.fullPath
      this.gop=this.$route.fullPath
  }
};
</script>

<style lang='less' scoped>
.left {
  background-color: #f9f9f9;
  height: 889px;
  width: 345px;
  .el-menu-vertical-demo{
       color: #3090ea;
            i{
                 font-size: 30px;
                
            }
            span{
                font-size: 18px ;
                
            }
           .shugang{
               float: left;
               margin-left: -19px;
               height: 60px;
               width: 3px;
              
                 &.active {
           background-color:#3090ea !important;
         
        }
           }
        
  }
   
}
</style>